<template>
    <div>
      <!-- 面包屑导航-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
  
      <!-- 卡片试图-->
      <el-card>
        <!-- 搜索和添加 -->
        <!-- gutter每列之间的间隔 槽宽 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-input placeholder="请输入内容" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-button type="primary">添加用户</el-button>
          </el-col>
        </el-row>
  
        <!-- 用户表格-->
        <!-- 一页有很多行，这个不用关心 会自动帮我们循环 stripe隔行展示 -->
        <el-table :data="userList" border stripe>
            <!-- type="index" 会自动排序 -->
            <el-table-column type="index" label="索引"> </el-table-column>
          <el-table-column prop="username" label="姓名"> </el-table-column>
          <el-table-column prop="email" label="邮箱"> </el-table-column>
          <el-table-column prop="role_name" label="权限"> </el-table-column>

          <el-table-column label="操作">
              <!-- enterable 文字是否可以移入提示信息，默认是可以的 -->
          
        <el-button type="primary" size="mini">编辑</el-button>
  
        <el-button type="danger" size="mini">删除</el-button>
    
           <el-tooltip effect="dark"  placement="top"  content="分配权限" :enterable='false'>
        <el-button type="warning" size="mini">权限</el-button>
      </el-tooltip>
              
              </el-table-column>
        </el-table>
      </el-card>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        // 查询用户列表的参数对象
        queryInfo: {
          query: "",
          pagenum: 1, //页码
          pagesize: 5, // 页大小
        },
        // 用户列表数据
          userList: [
            {
              "id": 1,
              "username": "张三",
              "email": "111111@qq.com",
              "role_name": "管理员"
            },
            {
              "id": 1,
              "username": "李四",
              "email": "222222@qq.com",
              "role_name": "管理员"
            },
            // {
            //   "id": 1,
            //   "username": "王五",
            //   "email": "333333@qq.com",
            //   "role_name": "用户"
            // },
            // {
            //   "id": 1,
            //   "username": "赵六",
            //   "email": "444444@qq.com",
            //   "role_name": "用户"
            // }
        ],
      };
    },
  
    created() {

    },
    methods: {

    },
  };
  </script>